<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="static/js/echarts.min.js"></script>
    <title>评分分布</title>
    
    <!--Stylesheets-->
    <link rel="stylesheet" href="static/css/fontawesome.min.css">
    <link rel="stylesheet" href="static/css/animate.min.css">
    <link rel="stylesheet" href="static/css/owl.carousel.min.css">
    <link rel="stylesheet" href="static/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="static/css/nice-select.css">
    <link rel="stylesheet" href="static/css/meanmenu.min.css">
    <link rel="stylesheet" href="static/style.css">
</head>
<body>
    <!--Preloader Start-->
	<div class="preloader">
		<img src="static/img/preloader.gif" alt="Preloader">
	</div>
    <header>
        <!--Primary Navigation Start-->
        <div class="primary-nav bg-primary">
            <div class="container">
                <div class="navigation">
                    <ul class="menu">
                        <li><a href="/index">首页</a></li>
                        <li><a href="/movie">电影</a></li>
                        <li><a href="/score">评分</a>
                        </li>
                        <li><a href="/word">词云</a></li>
                        <li><a href="/team">团队</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--Primary Navigation End-->
    </header>
    <!--Header End-->

    <!--Team Section Start-->
    <section class="team-section section-padding bg-light">
        <div class="container">
            <div class="section-title">
                <h2 class="title-lg text-center">豆瓣电影Top250评分分布图</h2>
                <div class="separator text-center">
                    <span class="line-pre bg-primary"></span>
                    <span class="shape bg-primary"></span>
                    <span class="line-post bg-primary"></span>
                </div>
                <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                <div id="main" style="width: 90%;height:400px;"></div>

            </div>
        </div>
    </section>
    <!--Team Section End-->


    <!--Javascripts-->
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/jquery.meanmenu.min.js"></script>
    <script src="static/js/owl.carousel.min.js"></script>
    <script src="static/js/jquery.nice-select.min.js"></script>
    <script src="static/js/script.js"></script>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {

        },
        tooltip: {},
        legend: {
          data: ['评分']
        },
        xAxis: {
          type: 'category',
          data: {{ score|tojson }}
        },
        yAxis: {
            type: 'value'
        },
        series: [
          {
            name: '评分',
            type: 'bar',
            barWidth: '60%',
            data: {{ num }}
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>

</body>
</html>